// 图片资源
var resources = [
	'fish1',
	'fish2',
	'fish3',
	'fish4',
	'fish5',
	'fish6',
	'fish7',
	'fish8',
	'bottom',
	'cannon1',
	'bullet1',
	'web1',
	'coinAni1',
	'coinAni2'
];

//////////////////////////////////////////////////////////////////////

// fish 鱼
// id、宽、高、速度、碰撞判断
// var FISH_SIZE=[
//   null,
//   {id:'1', w: 55, h: 37, speed: 2, collR: 17,},
//   {id:'2', w: 78, h: 64, speed: 2, collR: 24,},
//   {id:'3', w: 72, h: 56, speed: 2, collR: 20,},
//   {id:'4', w: 77, h: 59, speed: 2, collR: 22,},
//   {id:'5', w: 107, h: 122, speed: 2, collR: 29,},
//   {id:'6', w: 105, h: 79, speed: 1, collR: 29,},
//   {id:'7', w: 174, h: 126, speed: 1, collR: 35,},
//   {id:'8', w: 166, h: 183, speed: 1, collR: 60,},
// ];
var FISH_SIZE = [null];
$(".fish-list li").each(function(){
  var fish_obj = {id:'', w: 0, h: 0, speed: 0, collR: 0,}
  fish_obj.id = $(this).data("id");
  fish_obj.w = $(this).data("w");
  fish_obj.h = $(this).data("h");
  fish_obj.speed = $(this).data("speed");
  fish_obj.collR = $(this).data("collr");
  FISH_SIZE.push(fish_obj)
});

class Fish{
  constructor(type){
    this.type = type;
    this.id = FISH_SIZE[this.type].id;
    this.x = 0;
    this.y = 0;
    this.rotate = 0;
    this.speed = FISH_SIZE[this.type].speed;
    this.current = 0;
    this.collR = FISH_SIZE[this.type].collR;
    this.move();
  }

  draw(ctx){
    var {
      w,h
    } = FISH_SIZE[this.type];
    var {
      x,y,current
    } = this;
    ctx.save()
    ctx.translate( x , y );
    ctx.rotate(d2a(this.rotate))
    // 右侧鱼需要转一下，阴影在下
    if( this.rotate > 100 ){
      ctx.scale(1,-1);
    }
    ctx.drawImage(imageData['fish'+this.type],
      0,current*h,w,h,
      -w/2,-h/2,w,h
    );
    ctx.restore()
  }

  move(){
    setInterval(() => {
      this.current++
      if(this.type<6){
        if( this.current == 4 ){
          this.current = 0;
        }
      }else if(this.type>=6){
        if( this.current == 8 ){
          this.current = 0;
        }
      }
    },100);
    setInterval(() => {
      var speedX = this.speed * cos(d2a(this.rotate))
      var speedY = this.speed * sin(d2a(this.rotate))
      this.x += speedX
      this.y += speedY
    },30)
  }

  isBulletIn(x,y){
    var dis = sqrt(pow(x - this.x,2)+pow(y - this.y,2));
    return dis < this.collR
  }
}

//////////////////////////////////////////////////////////////////////

// cannon 炮筒
var CANNON_SIZE=[
  null,
  {w: 74, h: 74}
];

class Cannon{
  constructor(type){
    this.x = canvas.width*0.5;
    this.y = canvas.height - CANNON_SIZE[type].h/2;
    this.current = 0;
    this.rotate = 0;
    this.type = type;
    this.timer = null;
  }

  draw(ctx){
    var {
      w,h
    } = CANNON_SIZE[this.type];
    var {
      x,y,current
    } = this;
    ctx.save()
    ctx.translate(x, y);
    ctx.rotate(d2a(this.rotate))
    ctx.drawImage(imageData['cannon'+this.type],
      0,current*h,w,h,
      -w/2,-h/2,w,h
    );
    ctx.restore()
  }

  emit(){
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.current++;
      if( this.current == 5 ){
        this.current = 0;
        clearInterval(this.timer);
      }
    },30)
  }
}

//////////////////////////////////////////////////////////////////////

// bullet 子弹
var BULLET_SIZE=[
  null,
  {x: 0, y: 0, w: 24, h: 26}
];

class Bullet{
  constructor(type) {
    this.type = type;
    this.x = 0;
    this.y = 0;
    this.rotate = 0;
    this.speed = 5;  // 子弹速度
    this.timer = null;
    this.move();
    // this.play();
  }

  draw(ctx){
    var {
      x,y,w,h
    } = BULLET_SIZE[this.type]
    ctx.save()
    ctx.translate(this.x,this.y)
    ctx.rotate(d2a(this.rotate))
    ctx.drawImage(imageData.bullet1,
      x,y,w,h,
      -w/2,-h/2,w,h
    );
    ctx.restore();
  }

  move(){
    this.timer = setInterval(() => {
      var {
        rotate,speed
      } = this;
      this.x += speed*sin(d2a(rotate));
      this.y -= speed*cos(d2a(rotate));
      if(
        this.x < -20 ||
        this.x > canvas.width + 20 ||
        this.y < -20 ||
        this.y > canvas.height + 20
      ){
        clearInterval(this.timer);
      }
    },20)
  }

  // play(){
  //   var audio = new Audio();
  //   audio.src="audio/cannon.mp3";
  //   audio.play();
  // }
}

//////////////////////////////////////////////////////////////////////

// dieFish 捕获成功后鱼的动效
class DieFish{
  constructor(type) {
    this.type = type;
    this.x = 0;
    this.y = 0;
    this.rotate = 0;
    this.current = type<6?4:8;
    this.move();
  }

  draw(ctx){
    var {
      w,h
    } = FISH_SIZE[this.type];
    var {
      x,y,current
    } = this;
    ctx.save();
    ctx.translate( x , y );
    ctx.rotate(d2a(this.rotate));
    // 右侧鱼需要转一下，阴影在下
    if( this.rotate > 100 ){
      ctx.scale(1,-1);
    }
    ctx.drawImage(imageData['fish'+this.type],
      0,current*h,w,h,
      -w/2,-h/2,w,h
    );
    ctx.restore()
  }

  move(){
    setInterval(() => {
      this.current++;
      if(this.type<6){
        if( this.current == 8 ){
          this.current = 4;
        }
      }else if(this.type>=6){
        if( this.current == 12 ){
          this.current = 8;
        }
      }
    },100)
  }
}

//////////////////////////////////////////////////////////////////////

// net 网
var NET_SIZE = [
  null,
  {x:0	,y:0	,w:112	,h:113}
];

class Net{
  constructor(type) {
    this.type = type;
    this.x = 0;
    this.y = 0;
    // this.play();
  }

  draw(ctx){
    var {
      x,y,w,h
    } = NET_SIZE[this.type];
    ctx.save();
    ctx.translate(this.x,this.y);
    ctx.drawImage(imageData.web1,
      x,y,w,h,
      -w/2,-h/2,w,h
    );
    ctx.restore();
  }

  // play(){
  //   var audio = new Audio();
  //   audio.src="audio/net.wav";
  //   audio.play();
  // }
}

//////////////////////////////////////////////////////////////////////

// coin 金币
class Coin{
  constructor(type) {
    this.type = type;
    this.x = 0;
    this.y = 0;
    this.current = 0;
    this.move();
  }

  draw(ctx){
    ctx.save();
    ctx.translate(this.x,this.y);
    ctx.drawImage(imageData[`coinAni${this.type}`],
      0,this.current*60,60,60,
      -30,-30,60,60
    );
    ctx.restore()
  }

  move(){
    setInterval(() => {
      this.current ++;
      if( this.current == 10 ){
        this.current = 0;
      }
    },50);

    setTimeout(() => {
      setInterval(() => {
        var speed = 10;
        this.x += -speed;
        this.y += ((canvas.height - this.y)/this.x)*speed;
      },16)
    },300)
  }
}


